
import React from 'react';
import * as BasicTableStyle from './BasicTable.less';
import sortDown from '../../../resources/sort-down.png';
import sortUp from '../../../resources/sort-up.png';


export default class BasicTable extends React.Component {
    static propTypes = {
        name: React.PropTypes.string,
        isHeader: React.PropTypes.bool,
        table: React.PropTypes.array,
        width: React.PropTypes.number,
        onDetailSort: React.PropTypes.func
    };

    constructor(props) {
        super(props);
    }

    handleClick = (index) => {
      let { onDetailSort } = this.props;
      onDetailSort && onDetailSort(index);
    };


    render() {
        let { tableHeader, isBackgroundColor, orderFlag=[], data=[] , fontSize='16px'} = this.props;
        //写入表头
        let option = tableHeader.textArray;
        /*行宽根据列数column自动计算对应百分比*/
        let column = tableHeader.textArray.length;
        let cellWidth = Math.floor(100/column)+'%';

        /*表头根据单条数据的keys自动写入*/
        let tHeader = () => {
            let newItems=option.map((item,index) => 
                <span key={index} style={{width:cellWidth}}>
                    <b>{item}</b>
                    {tableHeader.isDesc[index]&&<img  title={orderFlag[index]?'点击后从高到低排序':'点击后从低到高排序'} onClick={()=>this.handleClick(item)} src={orderFlag[index]?sortDown:sortUp}/>}
                </span>)
            return newItems;
        }
        tHeader=tHeader();

        let tBody = () => {
            /*表身根据表头数据的value自动写入列*/
            let newItems = [];
            newItems = data.map((items, index) =>
                <li key={index}  className={isBackgroundColor?((index%2)==0?'haveABackgroundColor':'haveNotABackgroundColor'):''}>
                    {items.map((item,index)=>
                    <span key={index}  title={items[index]} style={{width:cellWidth}}>{items[index]}</span>)}
                </li>
            )

            return newItems
        }
        tBody = tBody();
   
    return (
      <div className={BasicTableStyle.basicTable} style={{fontSize: fontSize}}>
        <div>{tHeader}</div>	
	      <ul>
		      	{tBody}
        </ul>
      </div>
    );
  }
}
